<template>
  <div class="expense">
    <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="3">
      <grid-item v-for="(item,index) in imgs" :key="index">
        <div class="img-box">
          <i solt="icon" class="fa fa-minus-circle" @click="deleteImage(index)"></i>
          <img v-bind:src="_getPath(item.path)">
        </div>
      </grid-item>
      <grid-item :key="-1">
        <div class="img-box">
          <!--<input type="file" ref="imgInput" accept="video/*" capture="camcorder">-->
          <input style="display: none" ref="imgInput" type="file" capture="camera" accept="image/*" @change="uploadImage">
          <img src="~assets/images3/icon-ttianjia@3x.png" alt="" @click="addImage()">
        </div>
      </grid-item>
    </grid>
    <loading :show="isLoading" text="上传中"></loading>
  </div>
</template>
<script>
  import {Grid, GridItem,Loading} from 'vux'

  export default {
    name: "uploadImage",
    components: {
      Grid, GridItem,Loading
    },
    props: {
      imgs: Array
    },
    data() {
      return {
        isLoading:false
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      deleteImage(index) {
        this.imgs.splice(index, 1);
      },
      addImage() {
        if (this.$is_weixin()) {
          this.$register(['chooseImage', 'uploadImage']).then(() => {
            this.$wechat.chooseImage({
              sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
              success: (res) => {
                if (res.errMsg == 'chooseImage:ok') {
                  this.$wechat.uploadImage({
                    localId: res.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: (resp) => {
                      if (resp.errMsg == 'uploadImage:ok') {
                        this.$http.post('/wechat/resource/prove', {
                          mediaId: resp.serverId
                        }).then(data => {
                          this.imgs.push(data.data.data)
                        });
                      } else {
                        this.$vux.toast.show({
                          text: '上传图片失败',
                          type: 'warn'
                        });
                      }
                    }
                  });
                } else {
                  this.$vux.toast.show({
                    text: '选择图片失败',
                    type: 'warn'
                  });
                }
              }
            });
          })
        } else {
          this.$refs.imgInput.click()
        }
      },
      uploadImage(e) {
        if (e.currentTarget.files[0]) {
          var formData = new FormData();
          formData.append('file', e.currentTarget.files[0]);
          this.isLoading = true
          this.$http.post('/expense/api/upload/prove', formData).then(res => {
            this.isLoading = false
            this.imgs.push(res.data.data)
          });
        } else {
          this.$vux.toast.show({
            text: '请选择上传图片',
            type: 'warn'
          });
        }
      }
    }
  }
</script>

<style lang="less">
  .expense {
    padding: 0 10px 10px 10px;
    .weui-grid:after{
      border-bottom:none
    }
    .weui-grids {
      &:after{

      }
      .img-box{
        text-align: center;
        height: 80px;
        line-height: 80px;
        i {
          color: #C15E67;
          position: absolute;
          top: 8px;
          left: 4px;
          font-size: 22px;
        }
        img {
          margin: 0 auto;
          max-height: 80px;
          max-width: 80px;
        }
      }
    }
  }
</style>
